<template>
  <view :style="{ position: fixed, width: '100%' }">
    <view class="hrader">
      <image
        src="../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      {{ prayList.title }}
      <view class="xfjl" @click="openxiaofei">祈福记录</view>
    </view>
    <view class="content">
      <view class="sec1">
        <image
          class="bodh"
          :src="'https://www.123qifu.com/' + prayList.image"
          mode="widthFix"
        ></image>
        <view class="tables">
          <image
            v-if="active == 1"
            class="img"
            src="../../static/r1.png"
            mode=""
          />
          <image
            v-if="active == 2"
            class="img"
            src="../../static/r2.png"
            mode=""
          />
          <image
            v-if="active == 3"
            class="img"
            src="../../static/r3.png"
            mode=""
          />
          <image
            v-if="active == 4"
            class="img"
            src="../../static/r4.png"
            mode=""
          />
          <image
            v-if="active == 5"
            class="img img5"
            src="../../static/r5.png"
            mode=""
          />
        </view>
        <view class="tribute">
          <view
            class="wish_one"
            v-for="(wish, index) in wishList"
            @click="wishClcik(index + 1)"
            :key="index"
          >
            <image
              class="wishIm"
              :src="wish.imgUrl"
              style="width: 96rpx; margin-bottom: 15rpx"
              mode="widthFix"
            ></image>
            <text>{{ wish.text }}</text>
          </view>
        </view>
      </view>
      <view class="sec2">
        <view class="hTitle">在线祈福许愿</view>
        <view class="row">
          <view class="lef">
            <view class="txt">您的姓名：</view>
            <input style="flex: initial" type="text" v-model="username" />
          </view>
          <view class="lef">
            <view class="txt">年<span>龄：</span></view>
            <input style="flex: initial" type="number" v-model="age" />
          </view>
        </view>
        <view class="row">
          <view class="lef">
            <view class="txt">性别：</view>
            <select class="sex" v-model="sex">
              <option value="0">请选择</option>
              <option value="1">男</option>
              <option value="2">女</option>
            </select>
          </view>
          <view class="lef">
            <view class="txt">贡品：</view>
            <select class="sex" v-model="opValue" @click="changeOption">
              <option value="1">供烛</option>
              <option value="2">供香</option>
              <option value="3">供灯</option>
              <option value="4">供花</option>
              <option value="5">供果</option>
            </select>
          </view>
        </view>
        <view class="row">
          <view class="txt">祈愿主题：</view>
          <input type="text" v-model="title" />
        </view>
        <view class="row texa">
          <view class="txt">祈愿内容：</view>
          <textarea placeholder="请填写祈愿内容" v-model="content"></textarea>
        </view>
        <view class="row">
          <view class="txt">祈愿金额：</view>
          <input type="number" v-model="money" />
        </view>
        <view class="btns" @click="comnfirm">祈愿</view>
      </view>
    </view>
    <!-- 祈愿金额确认弹窗 -->
    <uni-popup ref="popup" type="center">
      <view class="popCenter">
        <text style="padding: 40rpx 0; font-weight: bold"
          >确认支付<span style="color: #c52b2e">{{ money }}元</span></text
        >
        <view class="popBtn">
          <text class="cancel" @click="cancell">取消</text>
          <text
            class="cancel"
            @click="quitClcik"
            style="border: 0; color: #333333"
            >确认</text
          >
        </view>
      </view>
    </uni-popup>
    <!-- 消费记录 -->
    <uni-popup ref="popRecord" type="bottom">
      <view class="boxs">
        <view class="selectPopup_one">
          <image
            src="../../static/clos.png"
            class="clos"
            mode="widthFix"
            @click="cancell"
          ></image>
          <text style="margin: 0 auto">我的祈福记录</text>
        </view>
        <scroll-view
          :scroll-into-view="toView"
          scroll-y="true"
          scroll-with-animation="true"
          class="scroll-y"
          @scrolltolower="lower"
        >
          <view class="xiaofei" v-for="(item, index) in list" :key="index">
            <view class="fukuan">
              <view>
                <view
                  style="font-size: 33rpx; font-weight: bold; color: #333333"
                  >{{ item.order_type_text }}</view
                >
                <view
                  style="padding-top: 10rpx; font-size: 28rpx; color: #999999"
                  >{{ item.add_time | formatDate }}</view
                >
              </view>
            </view>
            <view
              v-if="item.true_amount > 0"
              style="font-size: 42rpx; color: #f28a22"
              >+{{ item.true_amount }}</view
            >
            <view
              v-if="item.true_amount < 0"
              style="font-size: 42rpx; color: #c52b2e"
              >{{ item.true_amount }}</view
            >
          </view>
        </scroll-view>
        <view class="kuaiqu" v-show="list.length == 0">
          <image
            class="img"
            src="../../static/PersonalCenter/nodata.png"
            mode=""
          />
          <view class="nodata">您暂时没有相关记录~</view>
        </view>
      </view>
    </uni-popup>
    <!-- 支付方式 -->
    <uni-popup ref="popupPay" type="bottom">
      <view class="payboxs">
        <view class="selectPopup_one">
          <image
            src="../../static/clos.png"
            class="clos"
            mode="widthFix"
            @click="cancell"
          ></image>
          <view class="zfje">
            支付金额：<text style="color: #c52b2e">{{ money || "0" }}元</text>
          </view>
        </view>
        <scroll-view
          :scroll-into-view="toView"
          scroll-y="true"
          scroll-with-animation="true"
          class="scroll-y"
        >
          <view class="pop_two" @click="changeActive(0)">
            <view class="left">
              <image class="img" src="../../static/yue.png" mode="" />
              <view class="col">
                <text>余额</text>
              </view>
            </view>
            <image
              v-if="actives == 0"
              class="img"
              src="../../static/ridos.png"
              mode=""
            />
            <image v-else class="img" src="../../static/rido.png" mode="" />
          </view>
          <view class="pop_two" @click="changeActive(1)">
            <view class="left">
              <image class="img" src="../../static/yonj.png" mode="" />
              <view class="col">
                <text>佣金</text>
              </view>
            </view>
            <image
              v-if="actives == 1"
              class="img"
              src="../../static/ridos.png"
              mode=""
            />
            <image v-else class="img" src="../../static/rido.png" mode="" />
          </view>
          <view class="pop_two" @click="changeActive(2)">
            <view class="left">
              <image class="img" src="../../static/wechat.png" mode="" />
              <view class="col">
                <text>微信</text>
              </view>
            </view>
            <image
              v-if="actives == 2"
              class="img"
              src="../../static/ridos.png"
              mode=""
            />
            <image v-else class="img" src="../../static/rido.png" mode="" />
          </view>
          <view class="pop_two" @click="changeActive(3)" v-if="show">
            <view class="left">
              <image class="img" src="../../static/alipay.png" mode="" />
              <view class="col">
                <text>支付宝</text>
              </view>
            </view>
            <image
              v-if="actives == 3"
              class="img"
              src="../../static/ridos.png"
              mode=""
            />
            <image v-else class="img" src="../../static/rido.png" mode="" />
          </view>
        </scroll-view>
        <view class="pbtn" @click="comnfirmPay">确定</view>
      </view>
    </uni-popup>
    <!-- 交易密码弹窗 -->
    <uni-popup ref="popPasword" type="bottom">
      <view class="boxs boxss">
        <view class="selectPopup_one">
          <image
            src="../../static/clos.png"
            class="clos"
            mode="widthFix"
            @click="cancell"
          ></image>
          <text style="margin: 0 auto">请输入支付密码</text>
        </view>
        <validcode
          ref="pwd"
          :maxlength="6"
          :isPwd="true"
          @finish="getPwd"
        ></validcode>
      </view>
    </uni-popup>
    <uni-popup ref="popsuccue" type="center">
      <view class="popsuccue">
        <view class="txt">{{ text }}</view>
        <view class="btn" @click="cancell">确定</view>
        <view class="close" @click="cancell"></view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
export default {
  data() {
    return {
      wishList: [
        {
          index: 1,
          imgUrl: require("../../static/g1.png"),
          text: "供烛",
        },
        {
          index: 2,
          imgUrl: require("../../static/g2.png"),
          text: "供香",
        },
        {
          index: 3,
          imgUrl: require("../../static/g3.png"),
          text: "供灯",
        },
        {
          index: 4,
          imgUrl: require("../../static/g4.png"),
          text: "供花",
        },
        {
          index: 5,
          imgUrl: require("../../static/g5.png"),
          text: "供果",
        },
      ],
      prayList: [],
      active: 1,
      actives: 2, // 支付方式
      toView: "",
      fixed: "",
      list: [],
      username: "", // 姓名
      age: "", // 年龄
      sex: "0", // 性别:1=男,2=女
      opValue: "1", //  供品类型:1=供烛,2=供香,3=供灯,4=供花,5=供果
      title: "", // 祈愿主题
      content:
        "愿以此功德 庄严佛净土 上报四重恩 下济三途苦 若有见闻者 悉发菩提心 尽此一报身 同生极乐国", // 祈愿内容
      money: "", // 祈愿金额
      page: "1", // 页码
      pageSize: "10", // 每页条数
      total: "",
      last_page: "",
      orderCode: "", //订单编号
      payment: "wx", // 支付方式
      payPassword: "", // 支付密码
      isCommission: "0", // 非必传,默认为0,是否为佣金支付:0=否,1=是
      show: true,
      Wechatenvironment: true, // 微信内置打开，默认微信支付  false: h5打开，可以微信和支付宝支付
      text: "",
      userInfo: "",
    };
  },
  components: {
    uniPopup,
  },
  onLoad(options) {
    this.Wishid = options.Wishid;
    this.token = uni.getStorageSync("token");
    this.userInfo = uni.getStorageSync("userInfo");
  },
  onShow() {
    this.getPrayList();
    this.getMyBill();
    this.isWechat();
    this.getuserInfo();
  },
  methods: {
    gobackClick() {
      uni.navigateTo({
        url: "../Buddha/Lifo",
      });
    },
    // 获取用户信息
    async getuserInfo() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/getUserInfo",
        method: "GET",
        data: {},
      });
      if (res.data.code == 1) {
        that.userInfo = res.data.data;
        uni.setStorageSync("userInfo", res.data.data);
      }
    },
    // 判断是否在浏览器
    isWechat() {
      let en = window.navigator.userAgent.toLowerCase();
      if (en.match(/MicroMessenger/i) == "micromessenger") {
        // 微信内部打开默认微信支付 payment传空
        this.show = false;
        this.Wechatenvironment = true;
      } else {
        this.show = true;
        this.Wechatenvironment = false;
      }
    },
    // 获取礼佛数据
    async getPrayList() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/get_lf_detail",
        method: "GET",
        data: {
          id: that.Wishid,
        },
      });
      that.prayList = res.data.data;
    },

    // 获取消费记录列表
    async getMyBill() {
      const res = await this.$myRequest({
        url: "index/getMyBill",
        method: "POST",
        data: {
          page: this.page, // 页码
          pageSize: this.pageSize, // 每页条数
          type: "2",
        },
      });
      this.list = res.data.data.data;
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
    },
    // 获取消费记录下一页列表
    async loadMore() {
      const res = await this.$myRequest({
        url: "index/getMyBill",
        method: "POST",
        data: {
          page: this.page++, // 页码
          pageSize: this.pageSize, // 每页条数
          type: "2",
        },
      });
      this.list = this.list.concat(res.data.data.data);
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
    },
    // 在线祈福_生成订单
    async blessing() {
      const res = await this.$myRequest({
        url: "user/addBuddhistPrayNew",
        method: "POST",
        data: {
          id: this.Wishid,
          username: this.username,
          age: this.age,
          sex: this.sex,
          type: this.opValue,
          title: this.title,
          content: this.content,
          money: this.money,
        },
      });
      this.orderCode = res.data.msg;
      this.$refs.popupPay.open(); // 选择支付方式
    },

    // 滚动到底部加载
    lower() {
      if (this.total / 10 < this.last_page && this.total > 10) {
        this.loadMore();
      }
    },
    //选择贡品
    wishClcik(i) {
      this.active = i;
      this.opValue = i;
    },
    changeOption() {
      this.wishClcik(this.opValue);
    },
    // 祈愿
    comnfirm() {
      if (this.username == "") {
        uni.showToast({
          title: "请输入您的姓名",
          icon: "none",
        });
        return;
      }
      if (this.age == "") {
        uni.showToast({
          title: "请输入您的年龄",
          icon: "none",
        });
        return;
      }
      if (this.sex == 0) {
        uni.showToast({
          title: "请选择您的性别",
          icon: "none",
        });
        return;
      }
      if (this.title == "") {
        uni.showToast({
          title: "请输入您的祈愿主题",
          icon: "none",
        });
        return;
      }
      if (this.content == "") {
        uni.showToast({
          title: "请输入您的祈愿内容",
          icon: "none",
        });
        return;
      }
      if (this.money == "") {
        uni.showToast({
          title: "请输入您的祈愿金额",
          icon: "none",
        });
        return;
      }
      // this.$refs.popup.open();
      this.blessing();
    },
    // 祈愿愿意
    quitClcik() {
      this.blessing();
      this.$refs.popup.close();
    },
    //选择支付方式
    changeActive(id) {
      this.actives = id;
      if (id == 0) {
        this.isCommission = 0;
      } else if (id == 1) {
        this.isCommission = 1;
      } else if (id == 2) {
        this.payment = "wx";
      } else if (id == 3) {
        this.payment = "zfb";
      }
    },
    // 确定支付
    comnfirmPay() {
      this.$refs.popupPay.close();
      if (this.actives == 0 || this.actives == 1) {
        // 判断是否设置支付密码
        if (this.userInfo.isSetPayPassword) {
          // 余额和佣金支付需要支付密码
          this.$refs.popPasword.open();
        } else {
          uni.showToast({
            title: "请先设置支付密码",
            icon: "none",
          });
          setTimeout(function () {
            uni.navigateTo({
              url: "../user/balance/balance",
            });
          }, 1000);
        }
      } else {
        this.h5Pay(); // 微信或者支付宝支付
      }
    },
    // 支付密码输入完成
    getPwd(val) {
      this.moneyPay(val);
    },
    async moneyPay(val) {
      const res = await this.$myRequest({
        url: "pay/moneyPay",
        method: "POST",
        data: {
          orderCode: this.orderCode,
          isCommission: this.isCommission,
          payPassword: val,
        },
      });
      if (res.data.code == 1) {
        this.text = res.data.msg;
        this.$refs.popPasword.close();
        this.$refs.popsuccue.open();
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },
    // h5支付
    async h5Pay() {
      let that = this;
      if (this.Wechatenvironment) {
        // 微信内部打开默认微信支付
        const datas = await this.$myRequest({
          url: "pay/wx_pay",
          method: "POST",
          data: {
            order_sn: this.orderCode, //订单号
          },
        });
        if (datas.data.code == 1) {
          WeixinJSBridge.invoke(
            "getBrandWCPayRequest",
            {
              appId: datas.data.data.appId, //公众号名称，由商户传入
              timeStamp: datas.data.data.timeStamp, //时间戳，自1970年以来的秒数
              nonceStr: datas.data.data.nonceStr, //随机串
              package: datas.data.data.package,
              signType: datas.data.data.signType, //微信签名方式：
              paySign: datas.data.data.paySign, //微信签名
            },
            function (res) {
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠
                uni.request({
                  url: "https://www.123qifu.com/api/pay/weixin_getList",
                  method: "POST",
                  header: {
                    token: that.token,
                  },
                  data: {
                    order_sn: that.orderCode,
                  },
                  success: (res) => {
                    if (res.data.code == 1) {
                      // uni.navigateTo({
                      //   url: "../../pages/user/payment/payment",
                      // });
                      that.text = res.data.msg;
                      that.$refs.popsuccue.open();
                    }
                  },
                });
              }
            }
          );
        }
        return;
      }
      if (this.payment == "zfb") {
        //  支付宝支付
        const ress = await this.$myRequest({
          url: "user/h5Pay",
          method: "POST",
          data: {
            orderCode: this.orderCode,
            payment: this.payment,
          },
        });
        // 提交form表单
        document.querySelector("body").innerHTML = ress.data;
        document.forms[0].submit();
      } else {
        // 微信支付
        const ress = await this.$myRequest({
          url: "user/h5Pay",
          method: "POST",
          data: {
            orderCode: this.orderCode,
            payment: this.payment,
          },
        });
        let res = ress.data.data;
        if (res.return_msg === "OK") {
          // mweb_url是统一下单接口返回的链接

          // redirect_url就是支付成功后跳转的链接,需要encode后拼接到mweb_url后面,

          //如果不需要跳转则忽略redirect_url,不拼接
          //这样跳转后, mweb_url就会调起微信支付
          window.location.href =
            res.mweb_url +
            "&redirect_url=" +
            encodeURIComponent(
              this.$process == "development"
                ? "https://www.123qifu.com/internaltesting/#/pages/user/payment/payment"
                : "https://www.123qifu.com/wechatdemo/#/pages/user/payment/payment" //正式环境
            );
        }
      }
    },
    // 消费记录弹窗
    openxiaofei() {
      this.$refs.popRecord.open();
      this.fixed = "fixed";
    },
    // 取消
    cancell() {
      this.$refs.popup.close();
      this.$refs.popRecord.close();
      this.$refs.popupPay.close();
      this.$refs.popPasword.close();
      this.$refs.popsuccue.close();
      this.fixed = "";
    },
  },
};
</script>

<style lang="scss">
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
  .xfjl {
    position: absolute;
    font-size: 30rpx;
    right: 28rpx;
  }
}
.content {
  width: 100%;
  min-height: 90vh;
  padding-top: 88rpx;
  overflow-y: auto;
  .sec1 {
    width: 100%;
    height: 800rpx;
    background: url(../../static/wishBg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    .bodh {
      width: 510rpx;
      position: absolute;
      top: 50rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .tables {
    position: absolute;
    top: 350rpx;
    left: 50%;
    width: 550rpx;
    height: 300rpx;
    background: url(../../static/Table.png) no-repeat;
    background-size: 100% 100%;
    transform: translateX(-50%);
    .img {
      position: absolute;
      width: 120rpx;
      height: 110rpx;
      left: 50%;
      transform: translateX(-50%);
      top: -20rpx;
      &.img5 {
        top: 0;
      }
    }
  }
  .tribute {
    width: 690rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20rpx;
    .wish_one {
      width: 25%;
      .wishIm {
        display: block;
        margin: 0 auto;
      }
      text {
        display: block;
        text-align: center;
        color: #fff;
      }
    }
  }
  .sec2 {
    width: 100%;
    min-height: 30vh;
    box-sizing: border-box;
    padding: 30rpx 50rpx;
    .hTitle {
      text-align: center;
      font-size: 34rpx;
      font-weight: 500;
      color: #c52b2e;
      margin-top: 38rpx;
      margin-bottom: 53rpx;
      position: relative;
    }
    .hTitle::before {
      position: absolute;
      content: "";
      width: 100rpx;
      height: 2rpx;
      background: #c52b2e;
      left: 98rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .hTitle::after {
      position: absolute;
      content: "";
      width: 100rpx;
      height: 2rpx;
      background: #c52b2e;
      right: 98rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 50rpx;
      &.texa {
        align-items: flex-start;
        textarea {
          display: block;
          // width: 530rpx;
          flex: 1;
          height: 152rpx;
          box-sizing: border-box;
          padding: 10rpx 20rpx;
          border: 1px solid #e8e8e8;
          border-radius: 4rpx;
          text-align: justify;
          font-size: 26rpx;
          color: #333333;
        }
      }
      .txt {
        display: block;
        width: 150rpx;
        margin-right: 15rpx;
        text-align-last: justify;
        font-size: 26rpx;
        color: #333333;
        font-weight: normal;
        white-space: nowrap;
      }
      input {
        display: block;
        background: none;
        outline: none;
        // width: 530rpx;
        flex: 1;
        height: 52rpx;
        box-sizing: border-box;
        padding: 0 20rpx;
        border: 1px solid #e8e8e8;
        border-radius: 4rpx;
        font-size: 26rpx;
        color: #333333;
      }
      .lef {
        width: 50%;
        display: flex;
        align-items: center;
        .sex {
          display: block;
          width: 150rpx;
          height: 52rpx;
          font-size: 26rpx;
          box-sizing: border-box;
          padding: 0 15rpx;
          outline: none;
          border: 1px solid #e8e8e8;
          border-radius: 4rpx;
          background: transparent;
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
        }
        input {
          width: 150rpx;
        }
      }
      .lef:nth-child(2) {
        justify-content: flex-end;
      }
    }
    .btns {
      display: block;
      width: 250rpx;
      height: 66rpx;
      text-align: center;
      line-height: 66rpx;
      background: #c52b2e;
      font-size: 30rpx;
      color: #ffffff;
      border-radius: 35rpx;
      margin: 60rpx auto;
    }
  }
}
.popCenter {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 546rpx;
  padding: 10rpx 0 0;
  background-color: #fff;
  font-size: 30rpx;
  color: #333333;
  border-radius: 10rpx;
  .popBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100rpx;
    //background-color: pink;
    border-top: 1rpx solid #ccc;
    border-radius: 0 0 10rpx 10rpx;

    .cancel {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      color: #888888;
      width: 50%;
      height: 100%;
      border-right: 1rpx solid #ccc;
      letter-spacing: 2rpx;
    }
  }
}
.boxs {
  width: 100%;
  height: 1000rpx;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  &.boxss {
    height: 500rpx;
    .selectPopup_one {
      margin-bottom: 50rpx;
      text {
        font-size: 34rpx;
        font-weight: 500;
        color: #333333;
      }
    }
  }
  .selectPopup_one {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
    padding: 40rpx 0;
    border-bottom: 1rpx solid #eee;
    .clos {
      width: 24rpx;
      position: relative;
      left: 39rpx;
    }
  }
  .scroll-y {
    height: 90%;
  }
  .xiaofei {
    display: flex;
    width: 702rpx;
    height: 150rpx;
    margin: 0 auto;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #eeee;
    .fukuan {
      display: flex;
      align-items: center;
    }
  }
  .xiaofei:last-of-type {
    border-bottom: none;
  }
  .kuaiqu {
    .img {
      display: block;
      width: 288rpx;
      height: 156rpx;
      margin: 160rpx auto 0;
    }
    .nodata {
      text-align: center;
      font-size: 26rpx;
      font-weight: 400;
      color: #999999;
      margin-top: 22rpx;
    }
  }
}
.payboxs {
  width: 100%;
  height: 700rpx;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  .zfje {
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;
    padding: 30rpx;
  }
  .selectPopup_one {
    display: flex;
    align-items: center;
    height: 40rpx;
    width: 100%;
    font-size: 28rpx;
    color: #333333;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #e0e0e0;
    position: relative;
    .clos {
      width: 24rpx;
      position: relative;
      left: 39rpx;
    }
    .zfje {
      width: 100%;
      text-align: center;
    }
  }
  .pop_two {
    width: 690rpx;
    height: 100rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    .left {
      font-size: 30rpx;
      color: #333333;
      display: flex;
      align-items: center;
      .img {
        display: block;
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
      }
      .col {
        text {
          display: block;
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
        }
      }
    }
    > .img {
      display: block;
      width: 34rpx;
      height: 34rpx;
    }
  }
  .pop_two:last-of-type {
    border-bottom: none;
  }
  .pbtn {
    width: 250rpx;
    height: 66rpx;
    text-align: center;
    line-height: 66rpx;
    background: #c52b2e;
    border-radius: 40rpx;
    font-size: 30rpx;
    color: #ffffff;
    margin: 70rpx auto 0;
  }
}
.kuaiqu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}
.popsuccue {
  width: 478rpx;
  min-height: 506rpx;
  background: url("../../static/popBg.png") no-repeat;
  background-size: cover;
  box-sizing: border-box;
  padding-top: 1rpx;
  border-radius: 20rpx;
  position: relative;
  .txt {
    width: 100%;
    text-align: center;
    font-size: 26rpx;
    color: #333333;
    margin-top: 295rpx;
    box-sizing: border-box;
    padding: 0 65rpx;
  }
  .btn {
    width: 250rpx;
    height: 66rpx;
    background: #c52b2e;
    border-radius: 33rpx;
    text-align: center;
    line-height: 66rpx;
    font-size: 30rpx;
    color: #ffffff;
    margin: 36rpx auto;
  }
  .close {
    position: absolute;
    width: 66rpx;
    min-height: 66rpx;
    background: url("../../static/popclose.png") no-repeat;
    background-size: 100% 100%;
    bottom: -100rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
